<template>
    <canvas id="matrix"></canvas>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue'

// 代码雨
const raindrop = () => {
    let matrix: any = document.getElementById("matrix");
    let context = matrix.getContext("2d");
    matrix.height = window.innerHeight;
    matrix.width = window.innerWidth;
    let drop: any = [];
    let font_size = 26; //字体
    let columns = matrix.width / font_size;
    for (let i = 0; i < columns; i++) {
        drop[i] = 1;
    }

    function drawMatrix() {
        context.fillStyle = "rgba(0, 0, 0, 0.1)";
        context.fillRect(0, 0, matrix.width, matrix.height);

        context.fillStyle = "green";
        context.font = font_size + "px";
        for (let i = 0; i < columns; i++) {
            context.fillText(Math.floor(Math.random() * 2), i * font_size, drop[i] * font_size);/*get 0 and 1*/
            if (drop[i] * font_size > (matrix.height * 2 / 3) && Math.random() > 0.85)/*reset*/
                drop[i] = 0;
            drop[i]++;
        }
    }
    setInterval(drawMatrix, 50);
}

onMounted(() => {
    raindrop()
})
</script>

<style scoped lang='scss'>
#matrix {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
</style>